<template>
    <div style="height: 732px">
        <el-form-item>
            <el-alert
                title="商品详情内容输入框中禁止复制粘贴图片或拖拽图片添加至详情内容页，请点击图片图标上传"
                type="info"
                show-icon
                :closable="false"
            />
        </el-form-item>
        <el-form-item label="商品详情">
            <div style="display: flex;al">
                <Editor v-model="value.content" style="width: 375px" />
                <div class="uiwu-div-right">
                    <div style="padding-left: 10px; padding-right: 10px">
                        <div v-html="value.content"></div>
                    </div>
                </div>
            </div>
        </el-form-item>
    </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
import Editor from '@/components/editor.vue'
@Component({
    components: {
        Editor
    }
})
export default class AddDetails extends Vue {
    @Prop() value: any
}
</script>

<style scoped lang="scss">
::v-deep .el-alert__title {
    font-size: 16px !important;
}
.editor {
    min-width: 375px;

    /deep/ img {
        vertical-align: top;
        display: inline;
        max-width: 100%;
    }
}
.uiwu-div-right {
    margin-left: 40px;
    width: 360px;
    flex: none;
    height: 712px;
    border: 10px solid #f5f8ff;
    border-radius: 10px;
    box-sizing: content-box;
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
    /deep/ img {
        max-width: 100%;
    }
    /* 整体滚动条 */
    &::-webkit-scrollbar {
        width: 6px; /* 垂直滚动条的宽度 */
        height: 6px; /* 水平滚动条的高度 */
    }
    /* 滚动条的轨道部分 */
    &::-webkit-scrollbar-track {
        background: #f8f8f8; /* 轨道的背景颜色 */
    }
    /* 滚动条的滑块部分 */
    &::-webkit-scrollbar-thumb {
        background: #f2f2f2; /* 滑块的背景颜色 */
    }

    /* 当鼠标悬停在滑块上时的样式 */
    &::-webkit-scrollbar-thumb:hover {
        background: #555;
    }
}
</style>
